<template>
  <div class="bg">
    <!-- 头部 -->
    <Header title="运维管理—出库管理"></Header>

    <!-- 搜索栏 -->
    <section class="search_bar">
      <LInput label="出库单号" v-model="no"></LInput>
      <LDateTimeSelect2 label="日期" :value="time" @time-event="getNewTime" style="margin-left: 16px"></LDateTimeSelect2>
      <LSelect label="单据类型" :value="type" :options="option1" @selected-event="getNewSelected1" style="margin-left: 16px"></LSelect>
      <LSelect label="仓库" :value="ware" :options="option2" @selected-event="getNewSelected2" style="margin-left: 16px"></LSelect>
      <LSelect label="领用科室" :value="keshi" :options="option3" @selected-event="getNewSelected3" style="margin-left: 16px" placeholder="请选择"></LSelect>

    </section>
    <section class="search_bar">
      <LButton label="＋新增" @click="repairDialog = true"></LButton>
      <LButton label="查询数据" style="margin-left: 16px"></LButton>
      <LButton label="重置条件" style="margin-left: 16px" @click="clearSelected"></LButton>
      <LButton label="导出数据" style="margin-left: 16px" @click="exportExcel"></LButton>
    </section>
    <!-- 标签页 -->
    <el-tabs type="border-card">
      <el-tab-pane label="所有">
        <el-table :data="tableData1" style="width: 100%" border>
          <el-table-column prop="a" label="出库单号" width="120" />
          <el-table-column prop="b" label="出库类型" width="120" />
          <el-table-column prop="c" label="领用科室" />
          <el-table-column prop="d" label="材料员名称" />
          <el-table-column prop="e" label="材料员电话" />
          <el-table-column prop="f" label="创建日期" />
          <el-table-column prop="g" label="审核日期" />
          <el-table-column prop="h" label="制单人" />
          <el-table-column label="操作" width="190">
            <template #default>
              <!-- <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="待审核">
        <el-table :data="tableData2" style="width: 100%" border>
          <el-table-column prop="a" label="出库单号" width="180" />
          <el-table-column prop="b" label="出库类型" width="180" />
          <el-table-column prop="c" label="领用科室" />
          <el-table-column prop="d" label="材料员名称" />
          <el-table-column prop="e" label="材料员电话" />
          <el-table-column prop="f" label="创建日期" />
          <el-table-column prop="g" label="审核日期" />
          <el-table-column prop="h" label="制单人" />
          <el-table-column label="操作" width="180">
            <template #default>
              <!-- <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已审核">
        <el-table :data="tableData3" style="width: 100%" border>
          <el-table-column prop="a" label="出库单号" width="180" />
          <el-table-column prop="b" label="出库类型" width="180" />
          <el-table-column prop="c" label="领用科室" />
          <el-table-column prop="d" label="材料员名称" />
          <el-table-column prop="e" label="材料员电话" />
          <el-table-column prop="f" label="创建日期" />
          <el-table-column prop="g" label="审核日期" />
          <el-table-column prop="h" label="制单人" />
          <el-table-column label="操作" width="180">
            <template #default>
              <!-- <el-button type="primary" size="mini">编辑</el-button>
            <el-button type="danger" size="mini">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 弹出框：新增 -->
    <div v-dialogdrag>
      <el-dialog v-model="repairDialog" title="新增" width="70%" @close="repairDialogClose">
        <div class="dialog-border">
          <el-form label-width="110px" :model="repairForm" ref="repairFormRef" :rules="repairFormRules" size="small">
            <div class="row-1">
              <el-form-item label="出库单编号" prop="a" style="width:80%">
                <el-input v-model="repairForm.a" disabled placeholder="自动生成"></el-input>
              </el-form-item>
              <el-form-item label="出库类型" prop="b">
                <el-select v-model="repairForm.b" filterable style="width:180px">
                  <el-option label="入库类型1" value="1"></el-option>
                  <el-option label="入库类型2" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="发货员名称" prop="c">
                <el-input v-model="repairForm.c" filterable style="width:180px"></el-input>
              </el-form-item>
              <el-form-item label="供货员电话" prop="d" style="width:80%">
                <el-input v-model="repairForm.d"></el-input>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="制单人" prop="g" style="width:100%">
                <el-input v-model="repairForm.g" disabled placeholder="自动生成"></el-input>
              </el-form-item>
              <el-form-item label="制单日期" prop="h">
                <el-date-picker v-model="repairForm.h" style="width:180px"></el-date-picker>
              </el-form-item>
              <el-form-item label="仓库选择" prop="f">
                <el-select v-model="repairForm.f" filterable style="width:180px">
                  <el-option label="仓库1" value="1"></el-option>
                  <el-option label="仓库2" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="领用人" prop="e" style="width:100%">
                <el-input v-model="repairForm.e"></el-input>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="领用科室" prop="f">
                <el-select v-model="repairForm.f" filterable style="width:138px">
                  <el-option label="领用科室1" value="1"></el-option>
                  <el-option label="领用科室2" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="备注" prop="mark" style="width:100%">
                <el-input v-model="repairForm.mark"></el-input>
              </el-form-item>
            </div>
          </el-form>
          <div style="margin:0 0 2vh 0">
            <el-button type="primary" size="mini" @click="repairDialog1 = true">新增物品</el-button>
          </div>
          <div class="dialog-border-padding">
            <el-table :data="tableData4" style="width: 100%" border :default-sort="{ prop: 'a', order: 'descending' }" show-summary :summary-method="getSummaries4">
              <el-table-column prop="a" label="物品编码" />
              <el-table-column prop="b" label="物品名称" />
              <el-table-column prop="c" label="规格型号" />
              <el-table-column label="物品序列号" />
              <el-table-column prop="d" label="单位" />
              <el-table-column prop="e" label="数量" />
              <el-table-column prop="f" label="出库单价" />
              <el-table-column prop="g" label="总金额" />
              <el-table-column prop="h" label="仓库" />
              <el-table-column prop="i" label="库区" />
              <el-table-column prop="j" label="品质" />
              <el-table-column label="工单号" />
              <el-table-column label="部门" />
              <el-table-column prop="l" label="备注" />
              <el-table-column label="操作">
                <template #default>
                  <!-- <el-button type="danger" size="mini">删除</el-button> -->
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairSureBtn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <!-- “新增”弹出框里的弹框1：新增物品按钮 -->
    <div v-dialogdrag>
      <el-dialog v-model="repairDialog1" title="出库物品管理" width="75%" @close="repairDialog1Close" :rules="repairForm1Rules">
        <div class="dialog-border">
          <div style="margin:0 0 3vh 0">
            <el-button type="primary" size="mini" @click="repairDialog2 = true">+选择出库物品</el-button>
          </div>
          <el-form ref="repairForm1Ref" :model="repairForm1" label-width="100px" size="small">
            <div class="row-1">
              <el-form-item label="仓库" prop="a" style="width: 100%">
                <el-select v-model="repairForm1.a" filterable>
                  <el-option label="库区1" value="1"></el-option>
                  <el-option label="库区2" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="库区" prop="a" style="width: 100%">
                <el-select v-model="repairForm1.a" filterable>
                  <el-option label="库区1" value="1"></el-option>
                  <el-option label="库区2" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="物品编号" prop="a" style="width: 100%">
                <el-select v-model="repairForm1.a" filterable>
                  <el-option label="物品编号1" value="1"></el-option>
                  <el-option label="物品编号2" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="物品名称" prop="a" style="width: 100%">
                <el-select v-model="repairForm1.a" filterable>
                  <el-option label="物品名称1" value="1"></el-option>
                  <el-option label="物品名称2" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="物品序列号" prop="a" style="width: 100%">
                <el-select v-model="repairForm1.a" filterable>
                  <el-option label="物品名称1" value="1"></el-option>
                  <el-option label="物品名称2" value="2"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="规格型号" prop="a" style="width: 90%">
                <el-input v-model="repairForm1.a"></el-input>
              </el-form-item>
              <el-form-item label="是否耐用" prop="a" style="width: 93%">
                <div class="row-1-border">
                  <el-radio v-model="repairForm.b" label="1" size="mini">是</el-radio>
                  <el-radio v-model="repairForm.b" label="2" size="mini">否</el-radio>
                </div>
              </el-form-item>
              <el-form-item label="单位" prop="a" style="width: 90%">
                <el-input v-model="repairForm1.a"></el-input>
              </el-form-item>
              <el-form-item label="品质" prop="a" style="width: 90%">
                <el-input v-model="repairForm1.a"></el-input>
              </el-form-item>
              <el-form-item label="质保期" prop="a">
                <el-date-picker v-model="repairForm1.a" style="width: 175px"></el-date-picker>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="剩余数量" prop="a" style="width: 100%">
                <el-input v-model="repairForm1.a"></el-input>
              </el-form-item>
              <el-form-item label="数量" prop="a" style="width: 100%">
                <el-input v-model="repairForm1.a"></el-input>
              </el-form-item>
              <el-form-item label="出库单价" prop="a" style="width: 100%">
                <el-input v-model="repairForm1.a"></el-input>
              </el-form-item>
              <el-form-item label="总金额" prop="a" style="width: 100%">
                <el-input v-model="repairForm1.a"></el-input>
              </el-form-item>
              <el-form-item label="工单号" prop="a" style="width: 100%">
                <el-input v-model="repairForm1.a"></el-input>
              </el-form-item>
            </div>
            <div class="row-1">
              <el-form-item label="部门" prop="a" style="width: 20%">
                <el-input v-model="repairForm1.a"></el-input>
              </el-form-item>
              <el-form-item label="备注" prop="a" style="width: 65%">
                <el-input v-model="repairForm1.a"></el-input>
              </el-form-item>
              <div style="width:280px;padding:0 0 0 2.5vw">
                <el-button type="primary" size="mini" @click="repairDialog999 = true">添加</el-button>
                <el-button type="primary" size="mini">重置</el-button>
              </div>
            </div>
          </el-form>
          <el-table :data="tableData4" style="width: 100%" border :default-sort="{ prop: 'a', order: 'descending' }" show-summary :summary-method="getSummaries4">
            <el-table-column prop="a" label="物品编码" />
            <el-table-column prop="b" label="物品名称" />
            <el-table-column prop="c" label="规格型号" />
            <el-table-column prop="h" label="物品序列号" />
            <el-table-column prop="d" label="单位" />
            <el-table-column prop="e" label="数量" />
            <el-table-column prop="f" label="出库单价" />
            <el-table-column prop="g" label="总金额" />
            <el-table-column prop="i" label="仓库" />
            <el-table-column prop="i" label="库区" />
            <el-table-column prop="j" label="品质" />
            <el-table-column prop="j" label="工单号" />
            <el-table-column prop="j" label="部门" />
            <el-table-column prop="l" label="备注" />
            <el-table-column label="操作" width="140">
              <template #default>
                <el-button type="primary" size="mini">编辑</el-button>
                <el-button type="danger" size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairDialog1SureBtn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog1 = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <!-- “新增”弹出框里的弹框1：新增物品按钮 选择出库物品 -->
    <div v-dialogdrag>
      <el-dialog v-model="repairDialog2" title="选择出库物品列表" width="60%" @close="repairDialog2Close">
        <div class="dialog-border">
          <el-form label-width="80px" :model="repairForm2" ref="repairForm2Ref" :rules="repairForm2Rules" size="small">
            <div class="row-1">
              <el-form-item label="物品编码" prop="no" style="width:100%">
                <el-input v-model="repairForm2.no"></el-input>
              </el-form-item>
              <el-form-item label="物品名称" prop="type" style="width:100%">
                <el-input v-model="repairForm2.type"></el-input>
              </el-form-item>
              <el-form-item label="分类名称" prop="type" style="width:100%">
                <el-select v-model="repairForm2.type">
                  <el-option label="分类名称1" value="1"></el-option>
                  <el-option label="分类名称2" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="width:20%">
                <el-button type="primary">查询</el-button>
              </el-form-item>
            </div>
          </el-form>
          <div class="dialog-border-padding">
            <el-table :data="tableData4" style="width: 100%" border :default-sort="{ prop: 'a', order: 'descending' }">
              <el-table-column label="序列号" />
              <el-table-column prop="a" label="物品编码" />
              <el-table-column prop="b" label="物品名称" />
              <el-table-column label="仓库" />
              <el-table-column label="库区名称" />
              <el-table-column label="是否耐用" />
              <el-table-column prop="c" label="规格型号" />
              <el-table-column label="分类名称" />
              <el-table-column label="剩余数量" />
              <el-table-column label="单价" />
            </el-table>
          </div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairSure2Btn">新增</el-button>
            <el-button type="info" size="mini" @click="repairDialog2 = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import Header from "@/components/Header";
import moment from "moment";
import LInput from "../../../components/LInput.vue";
import LButton from "../../../components/LButton.vue";
import LDateTimeSelect2 from "@/components/LDateTimeSelect2.vue";
import LSelect from "@/components/LSelect.vue";
import CsvExportor from "csv-exportor"; //导出csv

export default {
  components: {
    Header,
    LInput,
    LButton,
    LDateTimeSelect2,
    LSelect,
  },
  data() {
    return {
      no: "",
      time: [],
      type: "1",
      ware: "1",
      keshi: "",

      option1: [
        { label: "全部", value: "1" },
        { label: "采购入库", value: "2" },
        { label: "暂估价入库", value: "3" },
        { label: "调拨入库", value: "4" },
      ],
      option2: [{ label: "仓库", value: "1" }],
      option3: [
        { label: "机关事务局", value: "1" },
        { label: "工程部", value: "2" },
      ],

      tableData1: [
        {
          a: "02",
          b: "检查机组运行噪声",
          c: "冷水机组",
          d: "检查空调机组运转时声音和震动是否正常",
          e: "是/否",
          f: "运行声音或震动是否正常",
          g: "",
        },
      ],

      tableData4: [
        {
          a: "01",
          b: "物品名称",
          c: "规格型号",
          d: "个",
          e: "100",
          f: "2.50",
          g: "250.00",
          h: "是",
          i: "库区",
          j: "优秀",
          k: "1",
          l: "XXXX",
        },
        {
          a: "01",
          b: "物品名称",
          c: "规格型号",
          d: "个",
          e: "100",
          f: "2.50",
          g: "250.00",
          h: "是",
          i: "库区",
          j: "优秀",
          k: "12",
          l: "XXXX",
        },
      ],

      repairDialog: false,
      repairForm: {},
      repairDialog1: false,
      repairForm1: {},
      repairDialog2: false,
      repairForm2: {},
      repairDialog3: false,
      repairForm3: {},
    };
  },
  mounted() {},
  beforeUnmount() {},
  methods: {
    //获取时间
    getNewTime(t) {
      this.time = t;
    },
    //下拉框获取单据类型
    getNewSelected1(s) {
      this.type = s;
    },
    //下拉框获取仓库
    getNewSelected2(s) {
      this.ware = s;
    },
    //下拉框获取领用科室
    getNewSelected3(s) {
      this.keshi = s;
    },
    //重置条件
    clearSelected() {
      this.no = "";
      this.time = [];
      this.type = "1";
      this.ware = "1";
      this.keshi = "";
    },
    //导出
    exportExcel() {
      console.log("导出数据按钮点击~~~");
      let tableData = this.tableData1;
      let header = [
        "出库单号",
        "出库类型",
        "领用科室",
        "材料员名称",
        "材料员电话",
        "创建日期",
        "审核日期",
        "制单人",
        "备注",
      ];
      CsvExportor.downloadCsv(tableData, { header }, "出库管理.xls");
      console.log("导出数据按钮点击结束~~~");
    },
    //========================================================================
    //自定义表格合计
    getSummaries4(param) {
      const { columns, data } = param;
      console.log("+++", columns, data);
      console.log("---", data);
      const sums = [];
      columns.forEach((column, index) => {
        switch (index) {
          case 0:
            sums[index] = "合计";
            return;
          case 1:
            sums[index] = "";
            return;
          case 2:
            sums[index] = "";
            return;
          case 3:
            sums[index] = "";
            return;
          case 4:
            sums[index] = "";
            return;
          case 6:
            sums[index] = "";
            return;
          case 8:
            sums[index] = "";
            return;
          case 9:
            sums[index] = "";
            return;
          case 10:
            sums[index] = "";
            return;
          case 11:
            sums[index] = "";
            return;
          case 12:
            sums[index] = "";
            return;
          case 13:
            sums[index] = "";
            return;
          case 14:
            sums[index] = "";
            return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        } else {
          sums[index] = "";
        }
      });
      return sums;
    },
  },
};
</script>

<style lang="less" scoped>
@import "../opera.less";

.search_bar {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.row-1 {
  display: flex;
  justify-content: space-between;
  padding: 0 2vw 0 0;

  .row-1-border {
    height: 31px;
    border: 1px solid #72aeff;
    border-radius: 5px;
    padding: 0 0 0 20px;
  }
}

/deep/ .el-dialog {
  --el-dialog-margin-top: 7vh;
}

.pop-2 {
  position: relative;

  /deep/ .el-dialog {
    --el-dialog-margin-top: 15vh;
  }
}
</style>
